<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0
    }

    ul {
      list-style: none;
      margin-top: 30px;
    }

    .box {
      width: 600px;
      margin: 100px auto;
      border: 1px solid #ccc;
      border-radius: 3px;
      padding: 20px;
    }

    textarea {
      width: 100%;
      height: 68px;
      outline: none;
      resize: none;
    }

    ul {
      width: 450px;
      padding-left: 80px;
    }

    ul li {
      line-height: 25px;
      border-bottom: 1px dashed #ccc;
    }

    .title {
      float: left;
    }

    .num {
      float: right;
    }

    .input {
      margin-top: 4px;
      padding: 5px;
    }

    .func {
      float: right;
    }

    #btn {
      display: inline-block;
      height: 28px;
      line-height: 29px;
      width: 60px;
      min-width: 40px;
      font-size: 14px;
      background-color: #ff8140;
      color: #fff;
      box-shadow: none;
      cursor: default;
      border: 1px solid #f77c3d;
      outline: none;
      padding: 0 10px;
      border-radius: 2px;
      text-align: center;
    }

    input {
      float: right;
    }
  </style>
</head>

<body>
  <div class="box" id="weibo">
    <div>
      <div class="title">有什么新鲜事想告诉大家</div>
      <div class="num">还可以输入
        <span>140</span>字</div>
    </div>
    <div style="clear: both"></div>
    <div class="input">
      <textarea name="" id="txt" cols="20" rows="10"></textarea>
    </div>
    <div class="func">
      <a id="btn">发布</a>
    </div>
    <div style="clear: both"></div>
    <ul id="ul"></ul>
    <div></div>

  </div>
  <script>
    // //需求：用户在文本域中输入内容 点击发布按钮 把文本域中的内容发布到ul中
    // //1.找人
    // var txt = document.getElementById("txt");
    // var btn = document.getElementById("btn");
    // var ul = document.getElementById("ul");
    // //2.点击按钮 把内容放到ul里
    // btn.onclick = function () {
    //   var li = document.createElement("li");
    //   ul.appendChild(li);
    //   //创建span来放文字
    //   var span = document.createElement("span");
    //   li.appendChild(span);
    //   // span.innerText = txt.value;

    // };






      window.onload = function(){
        var btn = document.querySelector('#btn');
        var txt = document.querySelector('#txt');
        var ul = document.querySelector('#ul')
        btn.onclick = function(){
          if(txt.value == ""){
            alert(输入内容为空);
          }else{
            var li = document.createElement('li');
            ul.appendChild(li); 
            li.innerHTML = txt.value;
            txt.value = "";
          }
            
        }
      }



  </script>
</body>

</html>